import { Component, createSignal, Match, Switch } from 'solid-js';
import { createStore } from "solid-js/store";

import logo from './logo.svg';
import styles from './App.module.css';

import DynamicInput from "./dynamic-input/index";
import Home from "./Home";

const App: Component = () => {
  const [current, setCurrent] = createSignal("foo");
  const [state, setState] = createStore({ route: 'home' });

  function clickMenu(menu:string) {
    setCurrent(menu)
    setState({ route: menu })
  }

  return (
    <div class="">
      <header class={styles.header}>
          <img src={logo} class={styles.logo} alt="logo" />
          <button class={current() === 'home' ? styles.selected : ''} onClick={() => clickMenu('home')}>Home</button>
          <button class={current() === 'dynamic-input' ? styles.selected : ''} onClick={() => clickMenu('dynamic-input')}>Dynamic Input</button>
      </header>
      <Switch fallback={<div>Not Found</div>}>
        <Match when={state.route === "home"}>
          <Home />
        </Match>
        <Match when={state.route === "dynamic-input"}>
          <DynamicInput name="abc" speed="speed" version="3434" website="website"></DynamicInput>
        </Match>
      </Switch>
    </div>
  );
};

export default App;
